<template>
  <div class="carte_da">
    <ul class="tip">
      <li
        class="li__"
        :class="item.index == isNow ? 'isNow' : ''"
        v-for="item in isBZ"
        :key="item.index"
      >
        <span class="round">{{ item.index }}</span>
        <span>{{ item.title }}</span>
      </li>
    </ul>
    <div class="box" v-if="isNow == 1">
      <el-form
        label-position="right"
        label-width="120px"
        :model="formLabelAlign"
      >
        <el-form-item label="证件类型：">
          <el-button-group>
            <el-button
              :type="formLabelAlign.certificateType == 1 ? 'primary' : ''"
              size="small"
              @click="formLabelAlign.certificateType = 1"
              >身份证</el-button
            >
            <el-button
              :type="formLabelAlign.certificateType == 3 ? 'primary' : ''"
              size="small"
              @click="formLabelAlign.certificateType = 3"
              >出生证</el-button
            >
          </el-button-group>
        </el-form-item>
        <el-form-item label="证件号码：">
          <el-input
            v-model="formLabelAlign.idCard"
            style="width: 50%"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small" @click="getUserInfo"
            >下一步</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="box2" v-if="isNow == 2">
      <el-form
        label-position="right"
        label-width="200px"
        :model="formLabelAlign"
      >
        <el-form-item label="证件类型：" class="form_item">
          <el-button-group>
            <el-button
              :type="formLabelAlign.certificateType == 1 ? 'primary' : ''"
              size="small"
              @click="formLabelAlign.certificateType = 1"
              disabled
              >身份证</el-button
            >
            <el-button
              :type="formLabelAlign.certificateType == 3 ? 'primary' : ''"
              size="small"
              @click="formLabelAlign.certificateType = 3"
              disabled
              >出生证</el-button
            >
          </el-button-group>
        </el-form-item>
        <el-form-item label="证件号码：" class="form_item">
          <el-input
            v-model="formLabelAlign.idCard"
            size="small"
            style="width: 50%"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="居民姓名：" class="form_item">
          <el-input
            v-model="formLabelAlign.residentName"
            size="small"
            style="width: 50%"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别：" class="form_item">
          <el-select
            v-model="formLabelAlign.gender"
            clearable
            placeholder="请选择性别"
            size="small"
          >
            <el-option label="男" value="1"> </el-option>
            <el-option label="女" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期：" class="form_item">
          <el-date-picker
            v-model="formLabelAlign.dataBirth"
            type="date"
            placeholder="选择出生日期"
            size="small"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="现住址：" class="form_item">
          <!-- <el-select
            v-model="formLabelAlign.nowAddress"
            clearable
            placeholder="请选择现住址"
            size="small"
            style="width: 90%"
          >
            <el-option label="测试" value="测试"> </el-option>
          </el-select> -->
          <el-input
            v-model="formLabelAlign.nowAddress"
            size="small"
            style="width: 90%; margin-top: 5px"
            placeholder="请在此输入小区名、门牌号、户号等，如：‘祥和小区88号’"
          ></el-input>
          <p>{{ formLabelAlign.nowAddress }}</p>
        </el-form-item>
        <el-form-item label="户籍地址：" class="form_item">
          <el-input
            v-model="formLabelAlign.permanentAddress"
            size="small"
            style="width: 90%; margin-top: 5px"
            placeholder="请在此输入小区名、门牌号、户号等，如：‘祥和小区88号’"
          ></el-input>
          <el-button
            size="small"
            type="primary"
            plain
            style="
              background-color: #fff;
              color: rgb(46, 160, 254);
              margin-left: 20px;
            "
            @click="set_regCode"
            >同步现住址</el-button
          >
        </el-form-item>
        <el-form-item label="联系电话：" class="form_item">
          <div>
            <el-checkbox
              :value="!!formLabelAlign.telephone"
              style="width: 100px"
              >本人电话</el-checkbox
            >
            <el-input
              v-model="formLabelAlign.telephone"
              placeholder="请输入本人电话"
              size="small"
              style="width: 60%"
            ></el-input>
          </div>
          <div style="margin-top: 5px">
            <el-checkbox
              :value="!!formLabelAlign.contactPhone"
              style="width: 100px"
              >联系人电话</el-checkbox
            >
            <el-input
              v-model="formLabelAlign.contactName"
              placeholder="请输入联系人"
              size="small"
              style="width: 20%"
            ></el-input>
            <el-input
              v-model="formLabelAlign.contactPhone"
              placeholder="请输入联系人电话"
              size="small"
              style="width: 40%"
            ></el-input>
          </div>
        </el-form-item>
        <!-- <el-form-item label="责任医生：" class="form_item">
          <el-select
            v-model="formLabelAlign.机构"
            clearable
            placeholder="请选择机构"
            size="small"
            style="margin-right: 10px"
          >
            <el-option label="测试" value="测试"> </el-option>
          </el-select>
          <el-select
            v-model="formLabelAlign.医生"
            clearable
            placeholder="请选择医生"
            size="small"
          >
            <el-option label="测试" value="测试"> </el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="乡镇（街道）名称：" class="form_item">
          <el-input
            v-model="formLabelAlign.乡镇"
            size="small"
            style="width: 50%"
            disabled
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="村（居）委会名称：" class="form_item">
          <el-input
            v-model="formLabelAlign.村"
            size="small"
            style="width: 50%"
            disabled
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="居民健康档案编码：" class="form_item">
          <table border="1" cellspacing="0" style="width: 90%">
            <tr>
              <th style="width: 20%">分段</th>
              <th style="width: 50%">档案所属地址</th>
              <th style="width: 30%">居民档案编码</th>
            </tr>
            <tr>
              <td>第一段</td>
              <td>云南省丽江市</td>
              <td>530721</td>
            </tr>
            <tr>
              <td>第二段</td>
              <td>玉龙纳西族自治县黎明傈僳族乡</td>
              <td>205</td>
            </tr>
            <tr>
              <td>第三段</td>
              <td>
                <el-select
                  v-model="formLabelAlign.编码"
                  clearable
                  placeholder=""
                  size="small"
                  style="margin-right: 10px"
                >
                  <el-option label="测试" value="测试"> </el-option>
                </el-select>
              </td>
              <td></td>
            </tr>
            <tr>
              <td>第四段</td>
              <td colspan="2">
                第四段为5位数字，表示居民个人序号，完成建档后，由系统根据建档顺序自动依次编制。
              </td>
            </tr>
          </table>
          <p
            style="
              width: 90%;
              color: #f19332;
              font-size: 14px;
              line-height: 20px;
              margin-top: 10px;
            "
          >
            居民健康档案编码：采用17位编码制，第一段为6位数字，表示县及县以上的行政区划，自动取值国家统计局行政区划代码（固定不变）；第二段为3位数字，表示乡镇/街道级行政区划，自动取值国家统计局行政区划代码（固定不变）；第三段为3位数字，表示村/居民委员会等，具体划分为：001-099
            表示居委会，101-199
            表村委会，901-999表示其他组织，如农场；第四段为5位数字，表示居民个人序号，完成建档后，由系统根据建档顺序自动依次编制。
            如第三段档案号数字和您实际单位对应的档案号不一致，可先联系客服纠正后再进行建档操作，客服热线：0871-63511500
          </p>
          <p
            style="
              width: 90%;
              color: #f19332;
              font-size: 14px;
              line-height: 20px;
            "
          >
            如第三段档案号数字和您实际单位对应的档案号不一致，可先联系客服纠正后再进行建档操作，客服热线：0871-63511500
          </p>
        </el-form-item> -->
        <el-form-item label="旧档案号：" class="form_item" v-if="false">
          <el-input
            v-model="formLabelAlign.residentInfoCodeOld"
            size="small"
            style="width: 50%"
            placeholder="旧档案号为17位数字"
          ></el-input>
          <p
            style="
              width: 90%;
              color: #f19332;
              font-size: 14px;
              line-height: 20px;
              margin-top: 10px;
            "
          >
            旧档案号指：已在管理的纸质档案上的标准档案编号或曾使用的公卫系统里生成的标准档案编号，如果有请填入，查看随访表或打印纸质版时将以旧档案号为准；如果没有旧档案号可不填，查看随访表或打印纸质版时将以居民健康档案编码为准。
          </p>
        </el-form-item>
        <el-form-item label="建档单位：" class="form_item">
          <!-- <el-select
            v-model="formLabelAlign.建档单位"
            clearable
            placeholder="请选择建档单位"
            size="small"
            disabled
          >
            <el-option label="测试" value="测试"> </el-option>
          </el-select> -->
          <el-input
            v-model="formLabelAlign.createUnitName"
            size="small"
            style="width: 50%"
          ></el-input>
        </el-form-item>
        <el-form-item label="建档人：" class="form_item">
          <!-- <el-select
            v-model="formLabelAlign.建档人"
            clearable
            placeholder="请选择建档人"
            size="small"
            disabled
          >
            <el-option label="测试" value="测试"> </el-option>
          </el-select> -->
          <el-input
            v-model="formLabelAlign.createUserName"
            size="small"
            style="width: 50%"
          ></el-input>
        </el-form-item>
        <el-form-item label="建档日期：" class="form_item">
          <el-date-picker
            v-model="formLabelAlign.fillDate"
            type="date"
            placeholder="选择建档日期"
            size="small"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="公卫人群：" class="form_item" v-if="false">
          <el-checkbox-group v-model="formLabelAlign.groupType">
            <el-checkbox label="1">普通居民</el-checkbox>
            <el-checkbox label="2">0～6岁儿童</el-checkbox>
            <el-checkbox label="4">孕产妇</el-checkbox>
            <el-checkbox label="8">65岁及以上老年人</el-checkbox>
            <el-checkbox label="16">高血压患者</el-checkbox>
            <el-checkbox label="32">2型糖尿病患者</el-checkbox>
            <el-checkbox label="64">严重精神障碍患者</el-checkbox>
            <el-checkbox label="128">肺结核患者</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="居民标签：" class="form_item" v-if="false">
          <el-checkbox-group v-model="formLabelAlign.residentType">
            <el-checkbox label="1">一般人</el-checkbox>
            <el-checkbox label="2">残疾人</el-checkbox>
            <el-checkbox label="3">计划生育特殊家庭成员</el-checkbox>
            <el-checkbox label="4">城市低保</el-checkbox>
            <el-checkbox label="5">建档立卡贫困人员</el-checkbox>
            <el-checkbox label="6">五保户</el-checkbox>
            <el-checkbox label="7">边缘易致贫户</el-checkbox>
            <el-checkbox label="8">突发严重困难户</el-checkbox>
            <el-checkbox label="9">脱贫不稳定户</el-checkbox>
            <el-checkbox label="10">农村特困</el-checkbox>
            <el-checkbox label="11">困难产业工人</el-checkbox>
            <el-checkbox label="12">城市特困</el-checkbox>
            <el-checkbox label="13">农村低保</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="慢病标签：" class="form_item">
          <el-checkbox-group v-model="formLabelAlign.chronicType">
            <el-checkbox label="冠心病">冠心病</el-checkbox>
            <el-checkbox label="慢阻肺">慢阻肺</el-checkbox>
            <el-checkbox label="高血压">高血压</el-checkbox>
            <el-checkbox label="糖尿病">糖尿病</el-checkbox>
            <el-checkbox label="脑卒中">脑卒中</el-checkbox>
            <el-checkbox label="慢性肾脏病">慢性肾脏病</el-checkbox>
            <el-checkbox label="肿瘤">肿瘤</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item style="text-align: center; margin-top: 20px">
          <el-button
            size="small"
            plain
            style="margin-left: -200px"
            @click="isNow = 1"
            >返回上一步</el-button
          >
          <el-button size="small" type="primary" @click="to_setUser"
            >下一步</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="box3" v-if="isNow == 3">
      <p style="text-align: center">
        <i
          class="el-icon-success"
          style="color: rgb(77, 195, 31); font-size: 70px"
        ></i>
      </p>
      <p
        style="
          text-align: center;
          font-weight: 900;
          font-size: 20px;
          color: #000;
        "
      >
        建档成功
      </p>
      <div class="card">
        <p style="border-bottom: 1px solid #ccc; padding-bottom: 10px">
          <span style="font-weight: 900; font-size: 20px">{{
            isInfo.residentName
          }}</span>
          <span
            style="display: inline-block; margin-left: 15px; font-size: 14px"
            >{{ isInfo.idCard }}</span
          >
          <el-tag type="success" style="margin-left: 15px" size="small"
            >正常</el-tag
          >
          <el-tag style="margin-left: 15px" size="small">未签约</el-tag>
        </p>
        <el-descriptions class="margin-top" :column="3" border>
          <el-descriptions-item>
            <template slot="label"> 性别 </template>
            {{ isInfo.gender | gender }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 生日 </template>
            {{ isInfo.dataBirth | time }}
          </el-descriptions-item>
          <!-- <el-descriptions-item>
            <template slot="label"> 公卫人群 </template>
            <el-tag size="warning">普通居民</el-tag>
          </el-descriptions-item> -->
          <el-descriptions-item>
            <template slot="label"> 建档时间 </template>
            {{ isInfo.fillDate | time }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 责任医生 </template>
            {{ isInfo.createUserName }}
          </el-descriptions-item>
          <!-- <el-descriptions-item>
            <template slot="label"> 居民标签 </template>
            <el-tag size="success">一般人</el-tag>
          </el-descriptions-item> -->
          <el-descriptions-item>
            <template slot="label"> 责任单位 </template>
            {{ hospitalName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 居民健康档案编码 </template>
            {{ isInfo.id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 旧档案号 </template>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 慢病标签 </template>
            <el-tag size="warning">{{ isInfo.chronicType }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="text-align: center; margin-top: 50px">
        <!-- <el-button plain size="small">下载居民健康档案封面</el-button> -->
        <!-- <el-button plain size="small">完善个人基本信息表</el-button> -->
        <el-button plain size="small" @click="goto_user_info"
          >查看居民档案详情</el-button
        >
        <el-button type="primary" size="small" @click="init_carte_da"
          >新建下一个档案</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isBZ: [
        {
          index: 1,
          title: "居民信息校验",
        },
        {
          index: 2,
          title: "填写居民健康档案封面",
        },
        {
          index: 3,
          title: "完成建档",
        },
      ],
      isNow: 1,
      formLabelAlign: {
        hospitalId: window.localStorage.getItem("hospitalId"),
        permanentAddress: "",
        nowAddress: "",
        certificateType: 1,
        groupType: [],
        residentType: [],
        chronicType: [],
        status: 0,
        isInfo: {},
        doctorName: window.localStorage.getItem("doctorName"),
        hospitalName: window.localStorage.getItem("hospitalName"),
      },
      user_info: {},
    };
  },
  filters: {
    time(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times = d.getFullYear() + "-" + month + "-" + day;
        return times;
      }
    },
  },
  methods: {
    init_carte_da() {
      (this.formLabelAlign = {
        hospitalId: window.localStorage.getItem("hospitalId"),
        groupType: [],
        residentType: [],
        chronicType: [],
        status: 0,
      }),
        (this.isNow = 1);
    },
    set_regCode() {
      this.formLabelAlign.permanentAddress = this.formLabelAlign.nowAddress;
    },
    to_setUser() {
      this.formLabelAlign.chronicType =
        this.formLabelAlign.chronicType.toString();
      this.formLabelAlign.groupType = this.formLabelAlign.groupType.toString();
      this.formLabelAlign.residentType =
        this.formLabelAlign.residentType.toString();
      this.$post("/resident/add", this.formLabelAlign).then((res) => {
        this.isNow = 3;
        this.isInfo = res.data;
      });
    },
    goto_user_info() {
      this.$router.push("/user_info?idCard=" + this.isInfo.idCard);
    },
    getUserInfo() {
      if (!this.formLabelAlign.idCard) {
        this.$notify.error({
          title: "提示",
          message: "请输入身份证号码进行下一步！",
        });
        return;
      }
      this.$post(
        "/resident/getInfoByIdCard?idCard=" + this.formLabelAlign.idCard
      ).then((res) => {
        this.user_info = res.data;
        if (res.data) {
          this.setUserInfo();
          this.isNow = 2;
        } else {
          this.isNow = 2;
        }
      });
    },
    setUserInfo() {
      this.formLabelAlign.residentName = this.user_info.residentName;
      this.formLabelAlign.gender = this.user_info.gender;
      this.formLabelAlign.dataBirth = this.user_info.dataBirth;
      this.formLabelAlign.nowAddress = this.user_info.nowAddress;
      this.formLabelAlign.permanentAddress = this.user_info.permanentAddress;
      this.formLabelAlign.telephone = this.user_info.telephone;
      this.formLabelAlign.contactPhone = this.user_info.contactPhone;
      this.formLabelAlign.contactName = this.user_info.contactName;
      this.formLabelAlign.residentInfoCodeOld =
        this.user_info.residentInfoCodeOld;
      this.formLabelAlign.residentInfoCode = this.user_info.residentInfoCode;
      this.formLabelAlign.createUnitName =
        window.localStorage.getItem("hospitalName");
      this.formLabelAlign.createUserName =
        window.localStorage.getItem("doctorName");
      this.formLabelAlign.fillDate = this.time(new Date());
    },
    time(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times = d.getFullYear() + "-" + month + "-" + day;
        return times;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.carte_da {
  min-height: calc(100vh - 46px);
  background-color: #fff;
  padding: 20px;
  .tip {
    width: 600px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 0 auto;
    padding: 10px;
    .li__ {
      display: inline-block;
      width: 33%;
      text-align: center;
      line-height: 22px;
      font-weight: 700;
      padding: 5px 0;
      .round {
        display: inline-block;
        width: 25px;
        height: 25px;
        border: 2px solid #58666e;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
    .isNow {
      border: 1px solid #1890ff;
      background: #e6f7ff;
      color: #1890ff;
      border-radius: 5px;
      .round {
        border: 2px solid #1890ff;
      }
    }
  }
  .box {
    width: 600px;
    margin: 0 auto;
    margin-top: 50px;
  }
  .box2 {
    width: 800px;
    margin: 0 auto;
    margin-top: 50px;
    .form_item {
      background-color: #fafafa;
      padding-top: 5px;
      margin-bottom: 5px;
      th {
        color: #000;
        text-align: left;
        font-weight: 700;
        font-size: 14px;
        padding: 0 10px;
      }
      td {
        padding: 8px 10px;
        font-size: 14px;
        line-height: 20px;
      }
    }
  }
  .box3 {
    margin-top: 50px;
    .card {
      margin-top: 20px;
      border: 1px solid #ccc;
      color: #000;
      padding: 20px;
    }
  }
}
</style>